<html>
    <head>
        <!--[if IE]>
            <script src="excanvas.compiled.js">
            </script>
        <![endif]-->
        <style>
            #a{border:1px dotted #888;float:left;} .info {border:1px solid #FFF;padding:10px;clear:right}
            input{height:50px;padding-right:50px;}
        </style>
        <script src="..\lib\hexerly.js">
        </script>
		<script>
		var NUM_COLUMNS, NUM_ROWS, h;
		NUM_COLUMNS = 100;
		NUM_ROWS = 100;

        function Hex(column, row) {
            this.column = column;
            this.row = row;
			this.fillColor = "#CCC";
	        this.draw = function(c) {
	            var xAndY;
  		        xAndY = hex2Point(column, row); ///xAndY[0] is the x-coord, xAndY[1] is the y-coord. See... it contains x *and* y.
	            drawHex(c, xAndY[0], xAndY[1], this.fillColor,"#FFF");
            };
			
			this.click = function(c) {
				if (this.fillColor === "#CCC") {
				  this.fillColor = "#F22";
				} else {
				  this.fillColor = "#CCC";
				}
				this.draw(c);
			}
        }
        
		function init() {
		    var c, column, row, xAndY;
            c = document.getElementById("a").getContext("2d");
			hexes = [];
    
            for (column = 0; column < NUM_COLUMNS; column = column + 1) {
			    hexes[column] = [];
                for (row = 0; row < NUM_ROWS; row = row + 1) {
				    hexes[column][row] = new Hex(column, row);
					hexes[column][row].draw(c);
		        }
		    }
			canvas = document.getElementById("a");
		    canvas.addEventListener("click", function (e) {
			    var columnAndRow = point2Hex(e.clientX - canvas.offsetLeft + document.body.scrollLeft + document.documentElement.scrollLeft, 
						e.clientY - canvas.offsetTop + document.body.scrollTop + document.documentElement.scrollTop);
			    /// columnAndRow[0] is the column number, columnAndRow[1] is the row number. See... it contains row *and* column.
				hexes[columnAndRow[0]][columnAndRow[1]].click(c);
			}, false);
		}
    	</script>
    </head>
    <body onload='init()'>
        <canvas id="a" width="2000" height="1000">
        </canvas>
    </body>
</html>